<template>
    <div class="messageList">
        <MessageItem v-for="(item, index) in data" v-model="data[index]" :key="index" @mousedown="handleClickItem">
        </MessageItem>
    </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, watch } from 'vue';
import MessageItem, { type MessageItemType } from './MessageItem.vue';
import { useMessageStore } from '@/stores/messageStore';
const messageStore = useMessageStore();

const emit = defineEmits(['update:modelValue'])

const props = defineProps<
    {
        modelValue: Array<MessageItemType>
    }>();

const data = computed<Array<MessageItemType>>({
    get() {
        return props.modelValue || [];
    },
    set(val) {
        emit('update:modelValue', val);
    }
})

watch(() => data.value, (newVal) => {
    emit('update:modelValue', newVal);
}, { deep: true })

const handleClickItem = (item: MessageItemType, event: MouseEvent) => {
    switch (event.button) {
        case 0:
            break;
        case 1:
            break;
        case 2:
            //右键, 给该条目置顶
            messageStore.messageList.splice(messageStore.messageList.indexOf(item), 1);
            messageStore.messageList.unshift(item);
            break;
    }
}

onMounted(() => {
    const totalUnread = data.value.reduce((sum, item) => sum + item.unreadCount, 0);
    messageStore.unreadCount = totalUnread;
});
</script>

<style lang="scss" scoped>
.messageList {
    overflow-y: auto;
    box-shadow: 0px 0px 20px rgb(233, 233, 233);
    border-radius: 8px;
    overflow: hidden;
}
</style>
